<template>
  <div :id="type + '-' + symbol" @click="handleHover()" class="cursor-pointer">
    <div class="whitespace-nowrap">{{ name }}</div>
    <div class="text-gray-400">{{ stock }}</div>
    <span class="bg-red-500 text-white text-sm mr-2 px-2.5 py-0.5 rounded" v-if="desc">
      {{ desc }}
    </span>
  </div>
  <div
    class="absolute z-10 invisible inline-block text-sm transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0"
    :id="'popoverContent-' + type + '-' + symbol"
  >
    <img :src="imgUrl" @click="Utils.forwordGu(symbol)" />
    <div class="grid grid-cols-3 gap-2 p-4">
      <template v-for="item in bkList" :key="item.plate_id">
        <button
          type="button"
          @click="Utils.forwordBk(item.plate_id)"
          class="inline-block rounded p-1 text-sm font-semibold leading-normal bg-white"
          :class="(item.core_avg_pcp > 0 ? 'text-red-500' : 'text-green-600', item.hit ? 'border-red-500 border-2' : 'border')"
        >
          {{ item.plate_name }} {{ (item.core_avg_pcp * 100).toFixed(2) }}%
        </button>
      </template>
    </div>
  </div>
</template>
<script setup>
import Utils from '../utils/index';
import axios from 'axios';
import { ref, nextTick } from 'vue';
const props = defineProps(['symbol', 'name', 'type', 'desc', 'placement']);
const stock = props.symbol.replace(/\D*/gi, '');

const placement = props.placement || 'right';
const popover = ref();
function createPopover(id) {
  let $targetEl = document.getElementById('popoverContent-' + props.type + '-' + props.symbol);
  let $triggerEl = document.getElementById(id);
  const options = {
    placement: placement,
    triggerType: 'click',
    offset: 10,
  };
  popover.value = new Popover($targetEl, $triggerEl, options);
}
const bkList = ref([]);
const imgUrl = ref('');

const baseUrl = 'https://image.sinajs.cn/newchart/min/n/';
function handleHover() {
  let top_plates = JSON.parse(window.localStorage.getItem('top_plates'));
  let symbol = Utils.formatGu(props.symbol);
  let clsSymbol = Utils.formatGu(props.symbol, 'cls');
  // console.log(props.symbol,symbol,clsSymbol)
  imgUrl.value = baseUrl + clsSymbol + '.gif';
  axios.get('https://flash-api.xuangubao.cn/api/stage2/plates_by_any_stock?fields=core_avg_pcp,plate_name&symbol=' + symbol).then(function (res) {
    let result = res.data.data;
    let plants = Object.keys(result);
    // 交集和差集
    let jj = plants.filter((e) => top_plates.indexOf(e) > -1);
    let cj = plants.filter((e) => top_plates.indexOf(e) == -1);

    if (jj.length > 0) {
      let j1 = jj
        .map((e) => {
          result[e].hit = true;
          return result[e];
        })
        .sort(Utils.compare('core_avg_pcp'));
      let j2 = cj.map((e) => result[e]).sort(Utils.compare('core_avg_pcp'));
      bkList.value = j1.concat(j2);
    } else {
      bkList.value = Object.values(result).sort(Utils.compare('core_avg_pcp'));
    }

    nextTick((e) => {
      createPopover(props.type + '-' + props.symbol);
      popover.value.show();
    });
  });
}
</script>
